<template>
	<view class="custom-tabbar">
		<view v-for="(item, index) in tabList" :key="index" class="tabbar-item"
			:class="{ 'active': activeIndex === index,middleButton: item.MiddleButton }"
			@click="switchTab(item, index)">
			<view class="middle-btn-box" v-if="item.MiddleButton">
				<image :src="activeIndex === index ? item.selectedIconPath : item.iconPath"
					class="tabbar-icon centerImage" />
			</view>
			<image v-else :src="activeIndex === index ? item.selectedIconPath : item.iconPath" class="tabbar-icon" />
			<text class="tabbar-text" :class="{'middle-text': item.MiddleButton}">{{ item.text }}</text>
			<!-- 可以在这里添加角标等自定义元素 -->
			<view v-if="item.badge" class="tabbar-badge">{{ item.badge }}</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'

	// 当前激活的 tab 索引
	const activeIndex = ref(0)

	// tabbar 配置数据
	const tabList = ref([{
			"pagePath": "/pages/index/index",
			"text": "首页",
			"iconPath": "/static/images/tab-home.png",
			"selectedIconPath": "/static/images/tab-home-active.png",
			badge: 0
		},
		{
			"pagePath": "/pages/tools/tools",
			"text": "工具",
			"iconPath": "/static/images/tab-alarm.png",
			"selectedIconPath": "/static/images/tab-alarm-active.png",
			badge: 0
		},
		{
			pagePath: "/pages/chat/chat",
			iconPath: "/static/images/tabbar/jqr.png",
			selectedIconPath: "/static/images/tabbar/jqr.png",
			text: "新小智",
			badge: 0,
			MiddleButton: true
		},
		{
			"pagePath": "/pages/message/message",
			"text": "消息",
			"iconPath": "/static/images/tab-work.png",
			"selectedIconPath": "/static/images/tab-work-active.png",
			badge: 0 // 示例角标
		},
		{
			"pagePath": "/pages/profile/index",
			"text": "个人",
			"iconPath": "/static/images/tab-profile.png",
			"selectedIconPath": "/static/images/tab-profile-active.png",
			badge: 0
		}
	])

	// 切换 tab
	const switchTab = (item, index) => {
		if (activeIndex.value === index) return
		activeIndex.value = index
		uni.navigateTo({
			url: item.pagePath,
		});
		// if (item.MiddleButton) {
		// 	uni.navigateTo({
		// 		url: item.pagePath,
		// 	});
		// } else {
		// 	uni.switchTab({
		// 		url: item.pagePath,
		// 		fail: (err) => {
		// 			console.error('切换tab失败:', err)
		// 			// 跳转失败时恢复之前的状态
		// 			restoreActiveIndex()
		// 		}
		// 	})
		// }


	}
	// 恢复之前的activeIndex
	const restoreActiveIndex = () => {
		const pages = getCurrentPages()
		if (pages.length) {
			const currentPage = pages[pages.length - 1]
			const currentPath = '/' + currentPage.route
			const matchedIndex = tabList.value.findIndex(item => item.pagePath === currentPath)
			if (matchedIndex !== -1) {
				activeIndex.value = matchedIndex
			}
		}
	}
	// 更新activeIndex的方法
	const updateActiveIndex = () => {
		const pages = getCurrentPages()
		if (!pages.length) return

		const currentPage = pages[pages.length - 1]
		const currentPath = '/' + currentPage.route

		// 在tabList中查找匹配的index
		const index = tabList.value.findIndex(item =>
			item.pagePath === currentPath ||
			// 处理可能的路径匹配问题
			currentPath.startsWith(item.pagePath)
		)

		if (index !== -1) {
			activeIndex.value = index
		}
	}
	// 监听页面显示，同步状态
	onShow(() => {
		updateActiveIndex()
	})

	// 初始化时更新状态
	onLoad(() => {
		updateActiveIndex()
	})




	// 初始化时设置当前激活的tab
	onLoad(() => {
		updateActiveIndex()
	})

	// 暴露方法供父组件调用
	defineExpose({
		updateActiveIndex,
		setActiveIndex: (index) => {
			activeIndex.value = index
		},
		setBadge: (index, value) => {
			tabList.value[index].badge = value
		}
	})
</script>

<style lang="scss" scoped>
	.custom-tabbar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 120rpx;
		background-color: #ffffff;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
		z-index: 999;
	}

	.tabbar-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;
		height: 100%;
		flex: 1;
	}

	.middle-btn-box {
		width: 90rpx;
		height: 90rpx;
		padding: 8rpx;
		position: absolute;
		top: -40rpx;
		background: #fff;
		border-radius: 50%;
		text-align: center;
		box-sizing: border-box;

		.centerImage {
			width: 74rpx;
			height: 74rpx;
		}

	}

	.middle-text {
		margin-top: 50rpx
	}

	.tabbar-icon {
		width: 48rpx;
		height: 48rpx;
		margin-bottom: 4rpx;
	}

	.tabbar-text {
		font-size: 22rpx;
		color: #666;
	}

	.tabbar-item.active .tabbar-text {
		color: #007AFF;
	}

	.tabbar-badge {
		position: absolute;
		top: 6rpx;
		right: 30rpx;
		min-width: 36rpx;
		height: 36rpx;
		line-height: 36rpx;
		text-align: center;
		background-color: #ff5a5f;
		color: white;
		font-size: 20rpx;
		border-radius: 18rpx;
		padding: 0 8rpx;
	}
</style>